import { Button, Select } from 'antd'
import { useState, useCallback, useMemo } from 'react'
import { useDebounceFn, usePrevious } from 'ahooks'

const LOADING_STRING = '-_-'

export interface SelectOption {
  label: string
  value: string
}
const SelectCmp = (props: any) => {
  const [showCreate, setShowCreate] = useState(false)
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState<string | string[]>()
  const [dropdownVisible, setDropdownVisible] = useState(false)
  const [searchValue, setSearchValue] = useState<string>('')
  const options: Array<SelectOption> = [{ label: 'Jack', value: 'Jack99' },{ label: 'Jack8', value: 'Jack8' },{ label: 'Jack7', value: 'Jack7' },{ label: 'Jack6', value: 'Jack6' },{ label: 'Jack5', value: 'Jack5' },{ label: 'Jack4', value: 'Jack4' },{ label: 'Jack3', value: 'Jack3' },{ label: 'Jack2', value: 'Jack2' },{ label: 'Jack1', value: 'Jack1' }]
  // const options = useMemo(() => {
  //   // if (props.options.status === ValueStatus.Available) {
  //   const loadingOption: SelectOption = { value: LOADING_STRING, label: '加载中。。。' }

  //   // const page = props.options.items?.map<SelectOption>(item => ({
  //   //   label: props.optionLabel.get(item).value!,
  //   //   id: item.id,
  //   //   value: props.optionValue.get(item).value!.toString(),
  //   // }))
  //   const page: Array<SelectOption> = []
  //   const existOption = page?.some((d: { value: string }) => d.value === searchValue)
  //   setShowCreate((existOption === undefined ? false : !existOption) && !!searchValue)

  //   const leftOptions = Array(props.options.offset).fill(loadingOption)

  //   const rightOptions = Array(props.options.totalCount! - props.options.items!.length - props.options.offset).fill(
  //     loadingOption
  //   )

  //   return leftOptions
  //     .concat(page)
  //     .concat(rightOptions)
  //     .map((v, i) => {
  //       if (v.value === LOADING_STRING) {
  //         return { label: v.label, value: LOADING_STRING + i.toString(), disabled: true }
  //       } else {
  //         return v
  //       }
  //     })
  //   // }
  // }, [props.options])

  const onChange = useCallback(
    (value: string) => {
      console.log(value)
      // if (props.isMultiConst) {
      //     return;
      // }
      // const selectedObjectItem = props.options.items?.find(d => d.id === value);
      // if (selectedObjectItem) {
      //     if (props.value && props.value.status === ValueStatus.Available) {
      //         props.value.setValue(props.optionValue.get(selectedObjectItem).value?.toString());
      //     }
      //     if (props.onSelect && props.options.status === ValueStatus.Available) {
      //         props.onSelect?.get(selectedObjectItem).execute();
      //     }
      // }
    },
    // [props.value, props.options]
    []
  )

  const { run } = useDebounceFn(
    (offset, _) => {
      if (Math.abs(offset - props.options.offset) % 50 > 15) {
        props.options.setOffset(Math.max(0, offset - 1))
      }
    },
    { wait: 300 }
  )
  // const preOptions = usePrevious(options)

  return (
    <Select
      // loading={props.options.status === ValueStatus.Loading}
      className='mxcn-select'
      allowClear
      maxTagCount='responsive'
      open={open}
      style={{
        width:'200px'
      }}
      // value={value}
      listItemHeight={32}
      onChange={onChange}
      onSelect={(_value: any, option: any) => {
        console.log(_value, option)
        // const obj = props.options?.items?.find(d => d.id === option.id)
        // if (obj) {
        //   props.onSelect?.get(obj).execute()
        // }
        // if (!props.isMultiConst) {
        //   props.value?.setValue(_value)
        // }
      }}
      onDeselect={(_value: any, option: any) => {
        console.log(_value, option)

        // const obj = props.selectList?.items?.find(d => d.id === option.id)
        // if (obj) {
        //   props.onDeselectM?.get(obj).execute()
        // }
      }}
      onClear={() => {
        // if (props.isMultiConst) {
        //   setInterval(POLLING_TIME)
        // } else {
        //   const obj = props.options?.items?.find(d => props.optionValue.get(d).value === props.value?.value)
        //   if (obj) {
        //     props.onDeselect?.get(obj).execute()
        //   }
        // }
        // props.value?.setTextValue('')
        // setSearchValue('')
      }}
      onDropdownVisibleChange={o => {
        if (!o) {
          setSearchValue('')
        }
        setOpen(o)
        setDropdownVisible(o)
      }}
      onPopupScroll={e => {
        run(Math.floor(e.currentTarget.scrollTop / 32), e.currentTarget.clientHeight / 32)
        console.log(Math.floor(e.currentTarget.scrollTop / 32),22)
      }}
      mode={'multiple'}
      options={dropdownVisible ? options : options}
      onSearch={setSearchValue}
      showSearch
      dropdownRender={menu => (
        <div className='mxcn-select-dropdown'>
          {menu}
          {showCreate ? (
            <div aria-selected='false' className='ant-select-item ant-select-item-option'>
              <div className='ant-select-item-option-content'>
                <Button
                  // loading={onCreateLoading}
                  block
                  type='text'
                  onClick={() => {
                    // onCreate(searchValue)
                  }}
                >
                  创建并选择&nbsp;
                  <span title={searchValue} className='on-create-text'>
                    {searchValue}
                  </span>
                </Button>
              </div>
              <span
                className='ant-select-item-option-state'
                unselectable='on'
                aria-hidden='true'
                style={{ userSelect: 'none' }}
              ></span>
            </div>
          ) : null}
        </div>
      )}
    ></Select>
  )
}
export default SelectCmp
